<template>
  <el-card shadow="never" class="rd-8 mb-8">
    <el-form :model="queryParams" class="flex">
      <el-form-item label="名称" class="form-item">
        <el-input
          placeholder="请输入名称"
          class="w-250"
          v-model="queryParams.name"
          clearable
        />
      </el-form-item>
      <el-form-item label="位置" class="form-item">
        <el-input
          placeholder="请输入位置"
          class="w-250"
          clearable
          v-model="queryParams.location"
        />
      </el-form-item>
      <el-form-item label="分类" class="form-item">
        <el-cascader
          v-model="queryParams.catalogs"
          :options="cascaderOptions"
          :props="props"
        />
      </el-form-item>
      <el-form-item label="创建时间" class="form-item">
        <el-date-picker
          v-model="rangeDate"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
          clearable
          class="w-250"
        />
      </el-form-item>
      <el-form-item class="form-item">
        <el-button type="primary" icon="Search" @click="getHasData()" />
        <el-button type="primary" icon="RefreshLeft" @click="queryReset()" />
      </el-form-item>
    </el-form>
    <el-button @click="hadndleAdd()" icon="Plus" type="primary" plain>
      添加美食
    </el-button>
    <el-button
      icon="Delete"
      type="danger"
      plain
      :disabled="selectedIds.length == 0"
      @click="handleDelete()"
    >
      批量删除
    </el-button>
  </el-card>

  <el-card shadow="never" class="rd-8">
    <el-table
      :data="tableArr"
      style="width: 100%"
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        label="序号"
        width="80px"
        align="center"
        type="selection"
      />
      <el-table-column label="序号" width="55" type="index" align="center">
        <template #default="scope">
          <span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" align="center" width="150" />
      <el-table-column prop="price" label="价格" align="center" width="100">
        <template #default="{ row }">
          <el-tag>￥{{ row.price }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="star" label="评分" align="center" width="180">
        <template #default="{ row }">
          <el-rate v-model="row.star" disabled text-color="#ff9900" />
        </template>
      </el-table-column>
      <el-table-column prop="imageUrl" label="封面" align="center" width="180">
        <template #default="{ row }">
          <div class="f-c-c">
            <img
              :src="
                row.image ||
                'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
              "
              class="w-100 h-100 rounded-full"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="location"
        label="位置"
        align="center"
        width="150"
      />
      <el-table-column prop="content" label="内容" align="center" width="180">
        <template #default="{ row }">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
          >
            <template #default>
              <div class="w-150 mb-2">
                {{ row.content }}
              </div>
            </template>
            <template #reference>
              <el-text class="w-150 mb-2" truncated>
                {{ row.content }}
              </el-text>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        width="180"
      />
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            icon="Edit"
            @click="handleEdit(row)"
          ></el-button>
          <el-button
            type="danger"
            size="small"
            icon="Delete"
            @click="handleDelete(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pt-10">
      <el-pagination
        @size-change="sizeChange"
        @current-change="getHasData"
        :pager-count="9"
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 10, 15]"
        :background="true"
        layout="prev, pager, next, jumper,->,sizes,total"
        :total="total"
      />
    </div>
  </el-card>
</template>

<script setup>
import { reqDelete, reqPage } from '@/api/food'
import { reqTree } from '@/api/catalog'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
let router = useRouter()

let tableArr = ref([])
let pageNum = ref(1)
let pageSize = ref(5)
let total = ref(0)
let selectedIds = ref([])
let queryParams = ref({})
let rangeDate = ref([])
let cascaderOptions = ref([])
let props = { multiple: true, value: 'cid', label: 'title' }
const getCatalogTree = async () => {
  let { data } = await reqTree()
  cascaderOptions.value = data
}
const handleSelectionChange = (selection) => {
  selectedIds.value = selection.map((item) => item.fid)
}
const hadndleAdd = () => {
  router.push('/food/save')
}
/* 分页大小改变 */
const sizeChange = () => {
  getHasData()
}
const getHasData = async (pager = 1) => {
  pageNum.value = pager
  if (rangeDate.value && rangeDate.value.length == 2) {
    queryParams.value.startTime = rangeDate.value[0]
    queryParams.value.endTime = rangeDate.value[1]
  } else {
    queryParams.value.startTime = undefined
    queryParams.value.endTime = undefined
  }
  const result = await reqPage(pageNum.value, pageSize.value, queryParams.value)
  tableArr.value = result.rows
  total.value = result.total
}
// 清空查询
const queryReset = () => {
  queryParams.value = {}
  rangeDate.value = []
  getHasData()
}
onMounted(() => {
  getHasData()
  getCatalogTree()
})
const handleEdit = (row) => {
  router.push(`/food/edit/${row.fid}`)
}
const handleDelete = (row) => {
  const ids = row ? row.fid : selectedIds.value
  ElMessageBox.confirm(`是否确认删除用户编号为【${ids}】的数据项？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await reqDelete(ids)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      await getHasData(pageNum.value || 1)
    })
    .catch(() => {})
}
</script>

<style lang="scss" scoped>
.form-item {
  margin: 0 10px 18px 0;
}
</style>
